<template>
  <div class="bg">
    <el-card class="box-card">
      <el-row type="flex" class="row-bg" justify="end">
        <el-col :span="4" :offset="3">
          <el-select v-model="value" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input style="width:220px" v-model="selectCode" placeholder="请输入商家名称/联系人/手机号码查询"></el-input>
        </el-col>
        <el-col :span="6">
          <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-col>

        <el-col :span="4">
          <div style="display:flex">
            <el-button type="primary" @click="searchDate">查询</el-button>
            <el-button type="success" @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格展示 -->
    <el-card class="card">

      <!-- 表格展示 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="index" width="100" type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="userRealName" label="用户名" align="center"></el-table-column>
        <el-table-column prop="phone" :show-overflow-tooltip="true" label="联系电话" align="center"></el-table-column>
        <el-table-column prop="userName" :show-overflow-tooltip="true" label="姓名" align="center"></el-table-column>
        <el-table-column prop="userIdCard" :show-overflow-tooltip="true" label="身份证号" align="center"></el-table-column>
        <el-table-column prop="helperPetExperience" label="养宠经验" align="center"></el-table-column>
        <el-table-column prop="helperShopName" label="店铺名称" align="center"></el-table-column>
        <el-table-column prop="helperGoodsPet" label="擅长宠物" align="center"></el-table-column>
        <el-table-column prop="helperShopAddress" label="店铺地址" align="center"></el-table-column>
        <el-table-column prop="mediaList" label="环境" align="center">
          <template slot-scope="scope">
            <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.mediaList[0]"
                :preview-src-list="scope.row.mediaList">
            </el-image>
          </template>

        </el-table-column>
        <el-table-column prop="helperType" label="类别" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.helperType == 1 ? '普通用户' : '商家'  }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userMargin" label="保证金" align="center"></el-table-column>
        <el-table-column prop="helperStatus" label="状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.helperStatus == 1 ? '待审核' : scope.row.helperStatus == 2 ? ' 已通过' : '已拒绝' }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="280" align="center">
          <template slot-scope="scope">
            <el-button v-if=" scope.row.helperStatus == 1" @click="shenHe(scope.row)" type="primary" size="small">审核
            </el-button>
            <el-button @click="look(scope.row)" type="primary" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
          background
          layout="total,  prev, pager, next, jumper"
          :total="total"
          :page-size="size"
          :current-page="current"
          @current-change="handleCurrentChange"
          style="margin-top:24px"
      ></el-pagination>
    </el-card>

    <el-dialog
        title="审核"
        :visible.sync="dialogVisible"
        width="20%"
        :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item prop="resource">
          <el-radio-group @change="radioChange" v-model="ruleForm.resource">
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="jujueIsShow" prop="reviewReason">
          <el-input placeholder="请输入拒绝原因" v-model="ruleForm.reviewReason"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="shenHeSubmit('ruleForm')">确定</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {export2Excel} from "@/components/commom.js";

export default {
  name: "helperlist",
  data() {
    return {
      jujueIsShow: false,
      shenHeSubmitRow: {},
      ruleForm: {
        name: '',
        resource: '',
        reviewReason: ""
      },
      rules: {
        resource: [
          {required: true, message: '请选择审核状态', trigger: 'change'}
        ],
        reviewReason: [
          {required: true, message: '请填写拒绝理由', trigger: 'blur'}
        ]
      },
      dialogVisible: false,
      options: [{
        value: 1,
        label: ' 待审核'
      }, {
        value: 2,
        label: '已通过'
      }, {
        value: 3,
        label: '已拒绝'
      }],
      value: '',
      value1: "",
      downloadLoading: false,
      tableData: [],
      merchantTotal: {}, //商家统计信息
      total: 0, //总条数
      size: 10,
      current: 1, //第一页的数据加载
      selectCode: "", //查询条件
      selectCode1: "",
      firstdata: "", //开始时间
      endtime: "" //结束时间
    };
  },
  mounted() {
    this.getHelperlist()
    this.merchantMsgtotal()
  },
  methods: {
    // 获取商户列表
    getHelperlist() {
      let param = {
        size: this.size,
        current: this.current,
        selectCode: this.selectCode,
        selectCode1: this.selectCode1,
        startDate: this.value1[0],
        endDate: this.value1[1],
        status: this.value,
        type: 2
      };
      this.$http.article.getHelperApplicationReviewlist(param).then(res => {
        this.tableData = res.result.records; //加载数据
        this.total = res.result.total; //总条数
        console.log("获取商户列表", this.tableData);
        // //显示每页展示的数量
        // res.result.records.forEach((item, index) => {
        //   //res.data.data.list 表格数据     forEach为每一项添加数据
        //   item.index = index + 1 + (this.current - 1) * 10;
        //   // this.currentPage当前页  this.pageParams.size 每页显示多少    :page-sizes="[10,20,30,50]" 分页大小
        //
        //   return item;
        // });
      });
    },
    // 获取商家统计信息
    merchantMsgtotal() {
      this.$http.article.getHelperCount().then(res => {
        this.merchantTotal = res.result;
        console.log("获取商家统计信息", res);
      });
    },
    // 查询功能
    searchDate() {
      this.current = 1; //模糊查询
      this.getHelperlist();
    },
    // 分页功能
    handleCurrentChange(val) {
      this.current = val;
      this.getHelperlist();
    },
    // 重置功能
    reset() {
      this.selectCode = ""; //查询条件
      this.selectCode1 = ""; //查询条件
      this.value1 = ""; //开始时间
      this.value = ""
      // 重新加载数据
      this.getHelperlist();
    },
    look(row) {
      this.$router.push({
        path: "/home/lookHelperlist",
        query: {
          userId: row.userId,
          helperId:row.helperId,
          title: "帮手审核",
          path: "./helperApplicationReview"
        }
      });
    },

    radioChange() {
      console.log(this.ruleForm.resource)
      if (this.ruleForm.resource == 3) {
        this.jujueIsShow = true
      } else {
        this.jujueIsShow = false
      }
    },
    shenHe(row) {
      this.dialogVisible = true
      console.log('row', row.userId)
      this.shenHeSubmitRow = row
    },
    shenHeSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let list = {
            helperId: this.shenHeSubmitRow.helperId,
            helperStatus: this.ruleForm.resource,
            reviewReason: this.ruleForm.reviewReason
          }
          this.$http.article.xgHelperlist(list).then(res => {
            this.getHelperlist()
            this.ruleForm.resource = ""
            this.$message.success('操作成功')
            this.dialogVisible = false
          });
        } else {
          return false;
        }
      })
    },
    handleClose() {
      this.jujueIsShow = false
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.jujueIsShow = false
      this.dialogVisible = false
    },
    //   导出
    exports() {
      console.log("导出");
      this.getHelperlist();
      const hader = [
        {
          title: "用户名",
          date: "userRealName"
        },
        {
          title: "联系电话",
          date: "phone"
        },
        {
          title: "姓名",
          date: "userName"
        },
        {
          title: "身份证号",
          date: "userIdCard"
        },
        {
          title: "保证金",
          date: "userMargin"
        }
        ,
        {
          title: "状态",
          date: "helperStatus"
        }        ,
        {
          title: "养宠经验",
          date: "helperPetExperience"
        }        ,
        {
          title: "擅长宠物",
          date: "helperGoodsPet"
        }        ,
        {
          title: "店铺名称",
          date: "helperShopName"
        }        ,
        {
          title: "店铺地址",
          date: "helperShopAddress"
        }
        ,
        {
          title: "帮手类型",
          date: "helperType"
        }
      ];

      const excelName = "帮手申请审核";

      let param = {
        size: 10,
        current: this.current,
        selectCode: this.selectCode,
        selectCode1: this.selectCode1,
        startDate: this.value1[0],
        endDate: this.value1[1],
        status: this.value,
        type: 2
      };
      this.$http.article.getHelperApplicationReviewlist(param).then(res => {
        console.log('55555', res)
        const list = res.result.records.map(item => {
          //因为有枚举类型，所以这里对数据进行处理
          if (item.helperStatus) {
            item.helperStatus =
                item.helperStatus == 1 ? "待审核" : item.helperStatus == 2 ? ' 已通过' : '已拒绝';
          }
          if (item.helperType) {
            item.helperType =
                item.helperType == 1 ? "普通用户" :'商家';
          }
          return item;
        });
        export2Excel(hader, list, excelName);
      });
    }
  }
}
</script>

<style scoped lang="scss" scoped>
.merchantData {
  display: flex;
  align-items: center;
  padding-top: 14px;

  .addmerchant {
    color: #409eff;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }

  .merchantNum {
    color: #f23a3a;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 800;
  }
}

.clearfix {
  padding-bottom: 20px;
}

.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  padding-top: 10px;
}

.box-card {
  width: 98%;
  height: 80px;
  margin: 0 auto;
}

.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>